<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link rel="stylesheet" href="../static/style.css">
    <title>图片处理</title>
    <title>图片处理</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* 设置最小高度为视口高度，确保内容撑开整个视口 */
        }

        header {
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #f0f0f0;
        }

        .logo img {
            max-width: 40px;
            height: auto;
        }

        .login {
            text-align: right;
        }

        .login button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #000000;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 20px;
        }

        .login button:hover {
            background-color: rgba(185, 176, 176, 0.19);
        }

        .main {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .image-container {
            display: flex;
            justify-content: space-around;
            width: 100%;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .image-container .image-wrapper {
            text-align: center;
            width: 45%;
            margin: 0 auto;
            padding: 10px;
            box-sizing: border-box;
        }

        .image-container .image-wrapper .image-box {
            background-color: #e1e1e1; /* 添加背景色 */
            padding: 10px;
            box-sizing: border-box;
        }

        .image-container .image-wrapper img {
            max-width: 80%;
            max-height: 80%;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        #progress-bar {
            width: 100%;
            height: 10px;
            background-color: #f0f0f0;
            margin-top: 10px;
        }

        #progress {
            height: 100%;
            background-color: #4caf50;
            width: 0%;
        }


        .buttons {
            margin-top: 20px; /* 按钮上方的间距 */
        }

        .buttons button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #000000;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 20px;
            margin-right: 10px; /* 按钮之间的右边距 */
        }

        .buttons button:last-child {
            margin-right: 0; /* 最后一个按钮不需要右边距 */
        }

        .buttons button:hover {
            background-color: rgba(185, 176, 176, 0.19);
        }
    </style>
</head>
<body>
<header>
    <div class="logo">
        <a href="{{ url_for('webhomepage.webhomepage_view') }}">
            <img src="../static/projectImages/logo.png" alt="Logo">
        </a>
    </div>
    <div class="login">
        {% if username %}
        <button onclick="redirectToProfile()">{{ username }}</button>
        {% else %}
        <button onclick="openModal('loginModal')">登录 / 注册</button>
        {% endif %}
    </div>
</header>

<div class="main">
    <div class="image-container">

        <div class="image-wrapper">
            <div> <p> 原图</p></div>
            <div id="original-image" class="image-box">

            </div>
            <div><!--进度条--></div>
        </div>
        <div class="image-wrapper">
            <div><p> 处理后</p></div>
            <div id="processed-image" class="image-box">

            </div>
        </div>
    </div>
    <div id="progress-bar">
        <div id="progress" style="width: 0%"></div>
    </div>

    <div class="buttons">
        <button onclick="handleRemoveWatermark()">水印去除</button>
        <button id="download-btn" onclick="handleDownload()" disabled>下载</button>
    </div>
</div>

<script>
    /*document.addEventListener('DOMContentLoaded', function() {
        var originalImageContainer = document.getElementById('original-image');


        var uploadedImage = localStorage.getItem('uploadedImage');
        console.log("njs");
        console.log(uploadedImage);
        if (uploadedImage) {
            var originalImg = document.createElement('img');
            originalImg.src = uploadedImage;
            originalImg.classList.add('uploaded-image');
            originalImageContainer.appendChild(originalImg);
        } else {
            originalImageContainer.innerHTML = 'No image uploaded.';
        }
    });*/

    document.addEventListener('DOMContentLoaded', function() {
    var originalImageContainer = document.getElementById('original-image');
    var progressBar = document.getElementById('progress');
    var progressContainer = document.getElementById('progress-bar');

    var uploadedImage = localStorage.getItem('uploadedImage');
    if (uploadedImage) {
        var originalImg = document.createElement('img');
        originalImg.src = uploadedImage;
        originalImg.classList.add('uploaded-image');
        originalImageContainer.appendChild(originalImg);

        // Simulate loading progress
        var progress = 0;
        var interval = setInterval(function() {
            progress += 10;
            progressBar.style.width = progress + '%';
            if (progress >= 100) {
                clearInterval(interval);
                progressContainer.style.display = 'none'; // 隐藏进度条
            }
        }, 500); // 模拟每隔0.5秒增加10%的加载进度
    } else {
        originalImageContainer.innerHTML = 'No image uploaded.';
    }
});


    function handleRemoveWatermark() {
        var uploadedImage = localStorage.getItem('uploadedImage');

        if (uploadedImage) {
            // 构建一个FormData对象，用于将文件发送给后端
            var formData = new FormData();
            var blob = dataURItoBlob(uploadedImage);
            formData.append('image', blob, 'njs.jpg');

            // 发送POST请求到后端处理函数
            fetch('/upload', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    // 处理后端返回的数据，可能是处理后的图片URL或其他信息
                    console.log('处理结果：', data);
                    // 如果有处理后的图片URL，可以展示在processedImageContainer中
                    var processedImg = document.createElement('img');
                    processedImg.src = data.processedImageURL;
                    console.log("1111")
                    console.log(processedImg.src)
                    var processedImageContainer = document.getElementById('processed-image');
                     processedImageContainer.innerHTML = ''; // 清空容器
                    processedImageContainer.appendChild(processedImg);
                    document.getElementById('download-btn').disabled = false; // 启用下载按钮
                })
                .catch(error => {
                    console.error('处理失败：', error);
                });
        } else {
            alert('请先上传图片！');
        }
    }
        // 将Base64字符串转换为Blob对象
    function dataURItoBlob(dataURI) {
            var byteString = atob(dataURI.split(',')[1]);
            var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
            var ab = new ArrayBuffer(byteString.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }
            return new Blob([ab], { type: mimeString });
        }

    function handleDownload() {
        var processedImageContainer = document.getElementById('processed-image');
        var processedImg = processedImageContainer.querySelector('img');

        if (processedImg) {
            var link = document.createElement('a');
            link.href = processedImg.src;
            link.download = 'processed_image.jpg';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        } else {
            alert('请先处理图片！');
        }
    }
    function redirectToProfile() {
    // 跳转到 watermark 页面，并传递图片信息
    window.location.href = '/history';
}

</script>

</body>
</html>
